<template>
	<div id="system_message" class="container">
		<div class="content">
			<!--<div class="title">{{title}}</div>--> 
			<div class="panel">
				<div class="condition">
					<div class="row_one">
						  
						<el-input style="width: 3.5rem;" placeholder="搜索 消息标题" clearable
			   				 		  v-model="param.keyword" class="input_search" maxlength="100">
			  			</el-input>
			  			&nbsp;
			  			<div class="search_btn" @click="search()" >搜索</div>
						
						<div class="right_btn" @click="openAddEdit()" >发消息</div>
					</div>
				</div>
				
				<div>
					<table class="table" cellspacing="0">
						<thead class="thead">
							<tr>
								<td style="width: 3.5rem;">消息标题</td>
								<td style="width: 4rem;">消息内容</td>
								<td style="width: 2rem;">发送时间</td>
								<td style="width: 2rem;">发送人</td>
								<td style="width: 2rem;">状态</td>
								<td style="width: 2rem;">操作</td>
							</tr>
						</thead>
						<tbody class="tbody">
							<tr v-for="item,index in messageList">
								<td style="padding-left:0.3rem;padding-right: 0.3rem;">
									{{item.title}}
								</td>
								<td>
									<div class="omit">{{item.content}}</div>
								</td>
								<td>{{item.publishTime}}</td>
								<td>{{item.sendUserName}}</td>
								<td>
									<span :style="{color : statusColor[item.isPublish]}">
										{{item.isPublish==1? '已发送':'未发送'}}
									</span>
								</td>
								<td>
									<template v-if="item.isPublish == 0">
										<span class="operate_btn" @click="send(item.messageId)">发送</span>
										&nbsp;
										<span class="operate_btn" @click="openAddEdit(item)">编辑</span>
									</template>
									<template v-else>
										<span class="operate_btn" @click="openDetail(item)">详情</span>
									</template>
									&nbsp;
									<span class="operate_btn" @click="toDelete(item.messageId)">删除</span>
								</td>
							</tr> 
						</tbody>
					</table>
				</div>
				<el-pagination
			      layout="total, sizes, prev, pager, next, jumper"
			      :current-page="param.currPage"
			      @size-change="pageSizeChange"
		      	  @current-change="pageIndexChange"
			      :total="count">
			    </el-pagination>
			</div>
		</div>
		
		<el-dialog :title="addEditTitle" :visible.sync="addEditVisible" width="8rem" :close-on-click-modal="false">
			<messageAddEdit ref="messageAddEdit" @cancel="addEditVisible=false" @ok="addEditOk"></messageAddEdit>
		</el-dialog>
		
		<el-dialog title="消息详情" :visible.sync="detailVisible" width="8rem" :close-on-click-modal="false">
			<messageDetail ref="messageDetail" @cancel="detailVisible=false"></messageDetail>
		</el-dialog>
	</div>
</template>

<script>
	
import messageAddEdit from './common/message_add_edit'
import messageDetail from './common/message_detail'
	
var vm,dict;
export default {
	components : {
		messageAddEdit,messageDetail
	},
	data : function() {
		return {
			title : this.$route.name,
			param : {
				keyword : "",
				startTime : "",
				currPage : 1,
				pageSize : 10
			},
			count : null,
	        messageList : [],
	        statusColor : {
	        	"0" : "#ff5252", //红色
	        	"1" : "#19b10d", //绿色
	        },
	        addEditVisible: false,
	        detailVisible: false,
	        addEditTitle: ""
		}
	},
	methods : {
		search : function(currPage) {
			vm.param.currPage = currPage || 1;
			vm.param.startTime = vm.getStartTime();
			//发送列表
			api.messageSendList(vm.param).then(function(data) {
				vm.messageList = data.list;
				vm.count = data.totalCount
			})
		},
		getStartTime : function(val) {
			let time = new Date();
			time.setMonth(time.getMonth()-3);
			return tool.DateToString(time, "yyyy-MM-dd");
		},
		pageSizeChange : function(val) { //页条数发生改变
	  		vm.param.pageSize = val;
	    	vm.search();
	  	},
	  	pageIndexChange : function(val) { //页码发生改变
	    	vm.param.currPage = val;
	    	vm.search(val);
	  	},
	  	toDelete : function(messageId) {
	  		tool.confirm("确定删除?", {
        		confirmButtonText: "确定",
        		cancelButtonText: "取消",
        		type: 'warning'
       	 	}).then(function() {
        		//删除接口
          		api.messageDelete({messageId}).then(function(data) {
		  			vm.search();
		  			tool.message({ showClose: true, message: "删除成功", type: 'success' });
		  		})
        	});
	  		
	  	},
	  	send : function(messageId) {
	  		tool.confirm("确定发送?", {
        		confirmButtonText: "确定",
        		cancelButtonText: "取消",
        		type: 'warning'
       	 	}).then(function() {
       	 		//请求发送接口
       	 		api.messageSend({messageId}).then(function(data){
       	 			vm.search();
       	 			tool.message({ showClose: true, message: "发送成功", type: 'success' });
       	 		})
        	});
	  	},
		openAddEdit : function(message) {
			vm.addEditVisible = true;
			vm.addEditTitle = (message? "编辑消息":"发消息");
			
			vm.$nextTick(function(){
				vm.$refs.messageAddEdit.init(message);
			});
		},
		addEditOk : function() {
			vm.search();
		},
		openDetail : function(message) {
			vm.detailVisible = true;
			vm.$nextTick(function(){
				vm.$refs.messageDetail.init(message);
			});
		},
	},
	mounted : function() {
		
	},
	created : function() {
		vm = this;
		//请求列表数据
		vm.search();
		
		//获取数据字典对象
		dict = tool.getItem(lsKey.dict,true);
	}
}

</script>

<style lang="scss">
	#system_message {
		.el-input__inner {
			border-radius: 0.08rem;
			font-size: 0.16rem;
			color: #666666;
			height: 0.36rem;
			line-height: 0.36rem;
		}
		.el-input__icon {
			line-height: 0.36rem;
		}
		
		.input_search {
			.el-input__inner {
				background-color: rgb(247,248,250);
			}
		}
	}
</style>
<style scoped src="../../style/module/table.css"></style>
<style scoped src="../../style/clue_manage/clue_manage.css"></style>
<style scoped>
	.right_btn {
		background-image: none;
		padding-left: 0;
		text-align: center;
		width: 1.6rem;
	}
	.omit {
		display: -webkit-box;
		-webkit-box-orient: vertical; 
		-webkit-line-clamp: 2;  
		text-overflow: ellipsis;
		overflow: hidden;
		text-align: center;
		margin: 0.08rem 0;
	}
</style>